<template>
	<view style="height: 100%">


		<view class="box">
			<view v-if="arr.length > 0" class="listV">
				<block v-for="(item, index) in arr" :key="index">
					<view class="list" :data-item="item">
						<view class="listPre">
							<image v-if="item.moren == 1" class="avtarIcon"
								src="https://xd.xdzcy.top/iconnew/address/address-Home.png"></image>
							<view v-else :class="'avtarIconCopy '">
								{{ item.title[0] }}
							</view>
						</view>
						<view class="listCen">
							<view class="listCen1">
								<view class="name">{{ item.title }}</view>
								<view class="phone">{{ item.mobile }}</view>
								<view class="default" v-if="item.moren == 1">默认</view>
							</view>
							<view class="listCen1">
								<view class="addressInfo">
									{{ item.province }}{{ item.area }}{{ item.province }}{{ item.address }}
								</view>
							</view>
						</view>
						<view class="listEnd">
							<image class="bianjiIcon" src="https://xd.xdzcy.top/iconnew/address/address-bianji.png"
								:data-item="item" @tap.stop.prevent="clickEdit(item)"></image>
						</view>
					</view>
				</block>
			</view>
			<block v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>

			</block>

			<view style="height: 150rpx"></view>
			<view class="btnV">
				<view class="btn" @tap="addAddress">
					<image class="addIcon" src="https://xd.xdzcy.top/iconnew/address/address-add.png"></image>
					<text>添加收货地址</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/config/api.js'
	export default {

		data() {
			return {
				arr: [],

				token: '',





				addressInfo: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

		},
		onShow: function() {
			this.getList();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		methods: {
			async getList() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let res = await addressList();
				uni.hideLoading()
				if (res.code == 1) {
					this.arr = res.data.list
				}
			},

			addAddress() {
				uni.navigateTo({
					url: './addressDetail'
				});
			},

			clickEdit(item) {

				uni.navigateTo({
					url: './addressDetail?item=' + JSON.stringify(item)
				});
			},


		}
	};
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style>
	.box {
		padding: 20rpx;
	}

	.listV {
		background: #ffffff;
		border-radius: 30rpx;
	}

	.list {
		display: flex;
		padding: 30rpx 0 22rpx 0;
	}

	.listPre {}

	.avtarIcon {
		width: 80rpx;
		height: 80rpx;
	}

	.avtarIconCopy {
		width: 80rpx;
		height: 80rpx;
		background: #ffe7e0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff4802;
	}

	.bianjiIcon {
		width: 48rpx;
		height: 46rpx;
	}

	.listCen {
		flex: 1;
	}

	.listCen1 {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.addressInfo {
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.name {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.phone {
		color: #999999;
		font-size: 24rpx;
		margin: 0 10rpx 0 10rpx;
	}

	.default {
		width: 64rpx;
		height: 36rpx;
		border-radius: 8rpx;
		border: 1px solid #ff4a03;
		color: #ff4a03;
		font-size: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.listPre {
		width: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.listEnd {
		width: 108rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fs14 {
		font-size: 28rpx;
	}

	.fs16 {
		font-size: 32rpx;
	}

	.btnV {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		padding: 20rpx 50rpx 44rpx 50rpx;
		background: #ffffff;
	}

	.btn {
		background: linear-gradient(90deg, #ec6c4f 0%, #ff820d 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 32rpx;
		height: 84rpx;
	}

	.addIcon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
</style>